<template>
<view class="container"
	style="background-image: url(/static/images/banner_02.png);">
	<view class="form-control">
		<view class="form-item">
			<input v-model="username"
				class="form-item-input"
				name="username"
				placeholder="请输入学号或手机号" />
		</view>
		<view class="form-item">
			<input v-model="password"
				type="password"
				class="form-item-input"
				name="password"
				placeholder="请输入密码" />
		</view>
		<view class="form-control-button">
			<button class="form-button"
				@click="onLogin">登录</button>
		</view>
	</view>
	<uni-popup id="popup"
		ref="popup"
		type="center"
		:animation="true">
		<view class="padding-all detail-white">{{ text }}</view>
	</uni-popup>
</view>
</template>

<script>
import { postLogin } from '@/api/index.js'
import {
	mapState,
	mapMutations
} from 'vuex'
export default {
	data() {
		return {
			username: null,
			password: null,
			text: null
		}
	},
	methods: {
		...mapMutations(['login', 'saveToken']),
		onLogin() {
			postLogin({
				username: this.username,
				password: this.password
			})
			.then(res => {
				if (res.code == 200) {
					const userInfo = res.data;
					this.login(userInfo);
					this.saveToken(userInfo.token);
					uni.setStorageSync('userInfo', userInfo);
					uni.setStorageSync('X-Auth-Token', userInfo.token);
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabbar/index'
						})
					}, 300);
				}
				else {
					this.text = res.message;
					this.$refs.popup.open();
					setTimeout(() => {
						this.$refs.popup.close();
					}, 1000);
				}
			})
		}
	},
	onShow() {
		// #ifdef APP-PLUS
		const tabIcon = plus.nativeObj.View.getViewById("icon");
		if (tabIcon) {
			setTimeout(function() {
				tabIcon.hide();
			}, 100);
		}
		// #endif
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	padding: 24rpx;
	background-repeat: no-repeat;
	background-size: 100% 320rpx;
	justify-content: center;
}
</style>
